import type { FC } from "react";
import classNames from "classnames";
import { Radio } from "antd";
import { produce } from "immer";
import styles from "../../index.module.scss";
import contentStyle from "../../../index.module.scss";

import { batchUpdateCustomization } from "../../layout";
// import {
//   useCustomizationStore,
//   usePersonalDetailsStore,
// } from "@/store/createStore";
import TitleBkgColor from "./titleBkgColor";
import { useCustomizationStore } from "@/src/providers/customization-store-provider";
import { usePersonalDetailStore } from "@/src/providers/personal-detail-store-provider";

interface IndexProps {}

const Index: FC<IndexProps> = () => {
  const { updatetTitle, addCustomization, customization } =
    useCustomizationStore(
      (state) => state,
      (o, n) => {
        return o.customization.title === n.customization.title;
      }
    );
  const { title } = customization;
  const { showIcon, style, showTitleStyle } = title || {};
  const { personalDetails } = usePersonalDetailStore(
    (state) => state,
    (o, n) => {
      return o.personalDetails.id === n.personalDetails.id;
    }
  );

  const run = (data) => {
    batchUpdateCustomization({
      updates: data,
      id: customization.id,
    });
  };
  const onChange = (key, v) => {
    const data = produce(customization.title, (draft) => {
      draft[key] = v;
    });

    if (customization.id) {
      run([
        {
          path: `title.${key}`,
          value: data[key],
        },
      ]);
    } else if (personalDetails.id) {
      updatetTitle(data);
      addCustomization(personalDetails.id);
      return;
    }
    updatetTitle(data);
  };
  return (
    <div className={classNames(styles.title)}>
      {showTitleStyle !== false ? (
        <>
          <h3
            className={contentStyle.subtitle}
            style={{ marginBottom: "10px", marginTop: "40px" }}
          >
            标题样式
          </h3>
          <div className={classNames(styles.columns)}>
            <div
              className={classNames(
                styles.item,
                style === "simple" ? styles.active : ""
              )}
              onClick={() => {
                onChange("style", "simple");
              }}
            >
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 137 49">
                <rect
                  fill="currentColor"
                  stroke="currentColor"
                  width="44"
                  height="9"
                  x="20"
                  y="20"
                  rx="1"
                ></rect>
              </svg>
            </div>
            <div
              className={classNames(
                styles.item,
                style === "underline" ? styles.active : ""
              )}
              onClick={() => {
                onChange("style", "underline");
              }}
            >
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 137 49">
                <rect
                  fill="currentColor"
                  stroke="currentColor"
                  width="48"
                  height="9"
                  x="20"
                  y="16"
                  rx="1"
                ></rect>
                <path
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M20 32L68 32"
                  fill="currentColor"
                  stroke="currentColor"
                ></path>
              </svg>
            </div>
            <div
              className={classNames(
                styles.item,
                style === "box" ? styles.active : ""
              )}
              onClick={() => {
                onChange("style", "box");
              }}
            >
              <svg viewBox="0 0 137 49" xmlns="http://www.w3.org/2000/svg">
                <path
                  fill="currentColor"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M29 35h79M108 14v21M29 13.92h79M29 14v20.5"
                ></path>
                <rect
                  fill="currentColor"
                  stroke="currentColor"
                  x="47"
                  y="20"
                  width="44"
                  height="9"
                  rx="1"
                ></rect>
              </svg>
            </div>
            <div
              className={classNames(
                styles.item,
                style === "boxleft" ? styles.active : ""
              )}
              onClick={() => {
                onChange("style", "boxleft");
              }}
            >
              <svg viewBox="0 0 137 49" xmlns="http://www.w3.org/2000/svg">
                <path
                  fill="currentColor"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M29 35h79M108 14v21M29 13.92h79M29 14v20.5"
                ></path>
                <rect
                  fill="currentColor"
                  stroke="currentColor"
                  x="34"
                  y="20"
                  width="44"
                  height="9"
                  rx="1"
                ></rect>
              </svg>
            </div>
            <div
              className={classNames(
                styles.item,
                style === "line" ? styles.active : ""
              )}
              onClick={() => {
                onChange("style", "line");
              }}
            >
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 137 49">
                <path
                  fill="currentColor"
                  stroke="currentColor"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M20 33L100 33"
                ></path>
                <rect
                  fill="currentColor"
                  stroke="currentColor"
                  width="44"
                  height="9"
                  x="20"
                  y="16"
                  rx="1"
                ></rect>
              </svg>
            </div>
          </div>
          <div style={{ margin: "20px 0px" }}>
            <Radio.Group
              onChange={(e) => {
                onChange("showIcon", e.target.value);
              }}
              value={showIcon}
            >
              <Radio value={true}>展示图标</Radio>
              <Radio value={false}>隐藏图标</Radio>
            </Radio.Group>
          </div>
        </>
      ) : null}
      <div style={{ marginTop: "40px" }}>
        <TitleBkgColor />
      </div>
    </div>
  );
};

export default Index;
